<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>工作台</title>
		<link type="text/css" rel="stylesheet" href="css/themes/sentox/easyui.css" />
		<link type="text/css" rel="stylesheet" href="css/themes/sentox/font-awesome.min.css">
		<style type="text/css">

		</style>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
	</head>

	<body>
		<div style="padding:10px;">
			<div style="float:left; margin:0 10px 0 0;">
				<div id="p" class="easyui-panel" title="Basic Panel" style="width:400px;height:300px;padding:10px;">
					<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
					<ul>
						<li>easyui is a collection of user-interface plugin based on jQuery.</li>
						<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
						<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
						<li>complete framework for HTML5 web page.</li>
					</ul>
				</div>
			</div>
			<div style="float:left; margin:0 10px 0 0;">
				<div class="easyui-accordion" style="width:350px;height:300px;">
					<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
						<h3 style="color:#0099FF;">Accordion for jQuery</h3>
						<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
					</div>
					<div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
						<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
					</div>
					<div title="TreeMenu" data-options="iconCls:'icon-search'" style="padding:10px;">
						<ul class="easyui-tree">
							<li>
								<span>Foods</span>
								<ul>
									<li>
										<span>Fruits</span>
										<ul>
											<li>apple</li>
											<li>orange</li>
										</ul>
									</li>
									<li>
										<span>Vegetables</span>
										<ul>
											<li>tomato</li>
											<li>carrot</li>
											<li>cabbage</li>
											<li>potato</li>
											<li>lettuce</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
			<div style="float:left; margin:0 10px 0 0;">
				<div class="easyui-panel" style="width:300px; height:300px; padding:5px">
					<ul class="easyui-tree" data-options="url:'json/tree_data1.json',method:'get',animate:true,lines:true"></ul>
				</div>
			</div>
			<!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
			<div style="float:left; margin:10px 10px 0 0;">
				<div id="tt" class="easyui-tabs" style="width:760px;height:250px;background-color:red;" data-options="border:false,narrow:true">
					<div title="About" style="padding:10px;border:1px solid #ddd">
						<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
						<ul>
							<li>easyui is a collection of user-interface plugin based on jQuery.</li>
							<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
							<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
							<li>complete framework for HTML5 web page.</li>
							<li>easyui save your time and scales while developing your products.</li>
							<li>easyui is very easy but powerful.</li>
						</ul>
					</div>
					<div title="My Documents" style="padding:10px;border:1px solid #ddd">
						<ul class="easyui-tree" data-options="url:'json/tree_data1.json',method:'get',animate:true"></ul>
					</div>
					<div title="Help" data-options="iconCls:'fa fa-question-circle-o fa-yxb1',closable:true" style="padding:10px;border:1px solid #ddd">
						This is the help content.
					</div>
				</div>
			</div>
			<!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
			<div style="width:300px; height:250px; float:left; margin:10px 10px 0 0;">
				<a href="#" class="grid-bt" id="bt_query"><i class="fa fa-search fa-yxa3"></i>查询</a><br <a href="#" class="grid-bt" id="bt_add"><i class="fa fa-plus fa-yxa3"></i>增加</a>
				<a href="#" class="grid-bt" id="bt_del"><i class="fa fa-trash-o fa-yxa3"></i>删除</a>
				<a href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-plus fa-yxa5'">Add</a>
				<a href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-trash-o fa-yxa5'">Remove</a>
				<a href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-save fa-yxa5'">Save</a>
				<a href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-cut fa-yxa5',disabled:true">Cut</a>
				<a href="#" class="easyui-linkbutton">Text Button</a>
				<a href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-search fa-yxa5'" style="width:80px">Search</a>
				<a href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-print fa-yxa5'" style="width:80px">Print</a>
				<a href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-refresh fa-yxa5'" style="width:80px">Reload</a>
				<a href="#" class="easyui-linkbutton" data-options="iconCls:'fa fa-question-circle-o fa-yxa5'" style="width:80px">Help</a>
			</div>
			<!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
		</div>
	</body>

</html>